<template>
  <div class="M-Flipper" :class="[flipType, { 'go': isFlipping }]">
    <div class="digital front" :class="_textClass(frontTextFromData)"></div>
    <div class="digital back" :class="_textClass(backTextFromData)"></div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// Props
const props = defineProps({
  // 当前数字
  num: {
    type: [Number, String],
    default: 0,
  },
  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
  duration: {
    type: Number,
    default: 500,
  },
});

// State
const isFlipping = ref(false);
const flipType = ref('down');
const frontTextFromData = ref(props.num); // 初始值为传入的 num
const backTextFromData = ref(props.num); // 初始值为传入的 num

// Methods
const _textClass = (number) => `number${number}`;

const _flip = (type, front, back) => {
  if (isFlipping.value) return;

  frontTextFromData.value = front;
  backTextFromData.value = back;
  flipType.value = type;
  isFlipping.value = true;

  setTimeout(() => {
    isFlipping.value = false;
    frontTextFromData.value = back; // 更新前牌文字
  }, props.duration);
};

const flipDown = (front, back) => _flip('down', front, back);

// Watch for changes in num
watch(
    () => props.num,
    (newNum, oldNum) => {
      if (newNum !== oldNum) {
        flipDown(oldNum, newNum); // 触发翻牌动画
      }
    }
);
</script>

<style scoped lang="scss">
.M-Flipper {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 35px;
  height: 50px;
  line-height: 50px;

  font-size: 30px;
  color: #000000;
  text-align: center;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
  background: linear-gradient(to bottom, #FFFFFF 49%, #c5c5c5 50%, #FFFFFF 80%);
  overflow: hidden;
  font-family: Abel-Regular;
}

.M-Flipper .digital:before,
.M-Flipper .digital:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.M-Flipper .digital:before {
  top: 0;
  bottom: 50%;
  background: linear-gradient(to bottom, #FFFFFF 49%, #ececec 99%, #FFFFFF 100%);
}

.M-Flipper .digital:after {
  top: 50%;
  bottom: 0;
  line-height: 0;
  background: linear-gradient(to bottom, #ececec 0%, #FFFFFF 80%);
}

/* 向下翻 */
.M-Flipper.down .front:before {
  z-index: 3;
}

.M-Flipper.down .back:after {
  z-index: 2;
  transform-origin: 50% 0%;
  transform: perspective(160px) rotateX(180deg);
}

.M-Flipper.down .front:after,
.M-Flipper.down .back:before {
  z-index: 1;
}

.M-Flipper.down.go .front:before {
  transform-origin: 50% 100%;
  animation: frontFlipDown 0.6s ease-in-out both;
  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
  backface-visibility: hidden;
}

.M-Flipper.down.go .back:after {
  animation: backFlipDown 0.6s ease-in-out both;
}

@keyframes frontFlipDown {
  0% {
    transform: perspective(160px) rotateX(0deg);
  }
  100% {
    transform: perspective(160px) rotateX(-180deg);
  }
}

@keyframes backFlipDown {
  0% {
    transform: perspective(160px) rotateX(180deg);
  }
  100% {
    transform: perspective(160px) rotateX(0deg);
  }
}

.M-Flipper .number0:before,
.M-Flipper .number0:after {
  content: '0';
}

.M-Flipper .number1:before,
.M-Flipper .number1:after {
  content: '1';
}

.M-Flipper .number2:before,
.M-Flipper .number2:after {
  content: '2';
}

.M-Flipper .number3:before,
.M-Flipper .number3:after {
  content: '3';
}

.M-Flipper .number4:before,
.M-Flipper .number4:after {
  content: '4';
}

.M-Flipper .number5:before,
.M-Flipper .number5:after {
  content: '5';
}

.M-Flipper .number6:before,
.M-Flipper .number6:after {
  content: '6';
}

.M-Flipper .number7:before,
.M-Flipper .number7:after {
  content: '7';
}

.M-Flipper .number8:before,
.M-Flipper .number8:after {
  content: '8';
}

.M-Flipper .number9:before,
.M-Flipper .number9:after {
  content: '9';
}
</style>